<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">


table{
border-collapse: collapse;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
a{
text-decoration: none;

}
.yh1{

height: 50px;
}
.yonghu{
text-align: center;

height: 30px;
}
.yh3{
text-align:center;
height: 30px;

font-weight: bolder;
}

th, td {
	padding: 6px 0;
	text-align: center;
}

th {
	background-color: #007D28;
	color: #ffffff;
}

tr {
	background-color: #E8FFE8;
}

.odd {
	background-color: #FFF3EE;
}

.highlight {
	background-color: #E0E0E0;
}
</style>
<script
	src="${pageContext.request.contextPath}/back/jquery/jquery-1.8.3.js"
	type="text/javascript"></script>

<script>
$(function() {
	$("tr:even").css("background-Color", "lightblue");

})

//动态给js添加class属性
//动态给js添加class属性
	function addClass(element, value) {
		if (!element.className) {
			element.className = value; //如果element本身不存在class,则直接添加class为value的值
		} else {
			element.className += " " + value; //如果element之前有一个class值，注意中间要多一个空格,然后再加上value的值
		}
	}

	//隔行换色
	function stripeTable() {
		var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
		for (var i = 0; i < tables.length; i++) {
			var rows = document.getElementsByTagName("tr");
			for (var j = 0; j < rows.length; j++) {
				if (j % 2 == 0) {
					addClass(rows[j], "odd"); //如是偶数行，则添加class为odd的属性
					//rows[j].setAttribute("class", "odd");
				}
			}
		}
	}

	//鼠标经过时高亮显示
	function highlightRows() {
		var rows = document.getElementsByTagName("tr");
		for (var i = 0; i < rows.length; i++) {
			rows[i].oldClassName = rows[i].className; //首先保存之前的class值
			rows[i].onmouseover = function() {
				addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
			}
			rows[i].onmouseout = function() {
				this.className = this.oldClassName; //鼠标离开时还原之前的class值
			}
		}
	}

	window.onload = function() {
		stripeTable();
		highlightRows();
	}
</script>
</head>

<body>

<h2 style="margin-left: 800px;">用户管理</h2>
<div class="content">
 <table border="1px" width="99%" cellspacing="0"  summary="user infomation table">
			<tr>
				<th class="yh1">用户名</th>
				<th class="yh1">联系电话</th>
				<th class="yh1">真实姓名</th>
				<th class="yh1">用户状态</th>
				<th class="yh1">操作</th>
				
			</tr>
			<c:forEach items="${list }" var="t">
					<tr>
						<td class="yonghu">${t.uname }</td>
						<td class="yonghu">${t.phonenum }</td>
						<td class="yonghu">${t.realname }</td>
						<c:if test="${t.state==0 }">
						   <td class="yonghu">正常</td>
						</c:if>
						<c:if test="${t.state==1 }">
						   <td class="yonghu">冻结</td>
						</c:if>
						
						<c:if test="${t.state==0 }">
						   <td class="yonghu"><a href="${pageContext.request.contextPath}/UpdateUserServlet?userstate=1&name=${t.uname }"><input type="button" value="冻结"></a></td>
						</c:if>
						<c:if test="${t.state==1 }">
						   <td class="yonghu"><a href="${pageContext.request.contextPath}/UpdateUserServlet?userstate=0&name=${t.uname }"><input type="button" value="解除"></a></td>
						</c:if>
						
						
					</tr>
			</c:forEach>
			<tr>
				<td colspan="5" class="yh3">
				  <span>第${requestScope.pageIndex }页--共${requestScope.totalPage }页</span>
					<a href="${pageContext.request.contextPath}/UserTableServlet?pageIndex=1">首页</a>
					<a href="${pageContext.request.contextPath}/UserTableServlet?pageIndex=${pageIndex-1 }">上一页</a>
					<a href="${pageContext.request.contextPath}/UserTableServlet?pageIndex=${pageIndex+1 }">下一页</a>
					<a href="${pageContext.request.contextPath}/UserTableServlet?pageIndex=${totalPage }">尾页</a>
				</td>
			</tr>
			</table>
			</div>
			
			
</body>
</html>